{extend name="common/base" /}
{block name="body"} 
<main>

    <div class="container layui-row">
        <div class="layui-col-md3 layui-col-xs12 personal-nav">
            <div class="personal-user-name">
                <h1>Welcome Back,<br>{$user_info.first_name}</h1>
                <p class="white-font">{$user_info.email}</p>
            </div>

            <div class="personal-nav-item">
                <p class="white-font font-size-small">PURCHASE HISTORY</p>
                <div class="select-button">
                    <a href="personal-info-all-purchases.html#block">
                        <span>View All Purchases</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>

                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">PROFILE</p>
                <div class="unselect-button">
                    <a href="/personal-my-sizes.html#block">
                        <span>My Sizes</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-info.html#block">
                        <span>Personal Info</span>
                        <img src="__ROOT__/static/images/go-white.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-payments.html#block">
                        <span>Payments</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-address-and-delivery.html#block">
                        <span>Address and Delivery</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">SECURITY AND COMMUNICATION</p>
                <div class="unselect-button">
                    <a href="/personal-change-password.html#block">
                        <span>Change Password</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-subsc-riptions.html#block">
                        <span>Subsc riptions</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>

                <div class="unselect-button margin-top-sign-out">
                    <a href="/login_out.html">
                        <span>Sign Out</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12 personal-genter" id="block">
            <h1 class="personal-genter-title">View All Purchases</h1>
            <ul class="layui-row collect-goods-item layui-col-space25 ul_height">
                {volist name="list" id="vo"} 
                    <li class="layui-col-md4 layui-col-xs6">
                        <div>
                            <a href="/goods/{$vo.gcode}">
                                <img src="{$vo.gcover}" />
                                <p><span>{$vo.gname}</span>
                                    <img src="__ROOT__/static/images/part2-go.png" alt="" />
                                </p>

                            </a>
                            <div class="collect-oparation">
                                <p class="cancel-collect collect" data-code="{$vo.gcode}">
                                    {if $vo.is_collect} 
                                        <img src="__ROOT__/static/images/cancel-heart.png" alt="">
                                        <span>cancel</span>
                                    {else /} 
                                        <img src="__ROOT__/static/images/heart.png" alt="">
                                        <span>collect</span>
                                    {/if}
                                </p>
                                <p class="collect-to-cart" data-ghash="{$vo.ghash}">
                                    <img src="__ROOT__/static/images/collect-shopping-cart.png" alt="">
                                    <span>add to cart</span>
                                </p>
                            </div>
                            <div class="collect-purchase" data-ghash="{$vo.ghash}">
                                <a href="javascript:;">
                                    Purchase
                                </a>
                            </div>
                        </div>
                    </li>
                {/volist}
    
            </ul>
        </div>
    </div>
</main>
{/block}
{block name="js"} 
<script>
    $(document).ready(function () {
            // Add to cart
        $('.collect-to-cart').click(function () {
           
            const ghash = $(this).data('ghash');
            if (!ghash) {
                layer.msg('Please select a valid specification combination!', { icon: 2 });
                return;
            }

            const data = {
                ghash: ghash,
                number: 1, // Default quantity is 1
            };

            // Send AJAX request
            ajaxRequest('/add_cart', data, 'POST', this, function (response) {
            
                if (response.code == 1) {
                    layer.msg('Successfully Added To The Shopping Cart', { icon: 1 });
                } else {
                    layer.msg(response.message || 'Operation Failed!', { icon: 2 });
                }
            });
        
        });

        $(document).on('click', '.collect', function() {
            var that = this;
            var code = $(this).data('code');
            var data = { gcode: code };
            
            // Make the AJAX request
            ajaxRequest('/collect', data, 'POST', this, function (response) {
            
                // Assuming the response will indicate if the item was successfully collected
                if (response.code == 1) {
                    // Toggle image and text
                    var img = $(that).find('img');
                    var span = $(that).find('span');
                    
                    // Check if currently collected (e.g., based on image or state)
                    if (span.text() === 'collect') {
                        // Change to "cancel" state
                        img.attr('src', '__ROOT__/static/images/cancel-heart.png');
                        span.text('cancel');
                    } else {
                        // Change to "collect" state
                        img.attr('src', '__ROOT__/static/images/heart.png');
                        span.text('collect');
                    }
                    
                    // Optional success message
                    layer.msg('SUCCESS', {icon: 1, time: 2000});
                }
            });
        });

        $('.collect-purchase').click(function () {
			const ghash = $(this).data('ghash');
            if (!ghash) {
                layer.msg('Please select a valid specification combination!', { icon: 2 });
                return;
            }

            const data = {
                ghash: ghash,
                number: 1, // Default quantity is 1
            };

			// Send AJAX request
			ajaxRequest('/add_cart', data, 'POST', this, function (response) {
				console.log(response)
				if (response.code == 1) {
					var cart_id = response.data
					window.location.href = '/order/'+cart_id;
				} else {
					layer.msg(response.message || 'Operation Failed!', { icon: 2 });
				}
			});
		});
    })
</script>
{/block}


